<template>
    <div class="catfooter">
        <div class="allcheck">
            <input type="checkbox" @click="allchecked" :checked="isallcheckd" >
        </div>
        <div class="price">合计：{{totalmonry | monery}}</div>
        <div class="pay" @click="gotopay">去结算({{checkedtotal}})</div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
    computed:{
        ...mapGetters(['checkedtotal','totalmonry','isallcheckd'])
    },
    filters:{
        monery(val){
            return ('￥')+val.toFixed(2)
        }
    },
    data() {
        return {
            allckeck:this.isallcheckd
        }
    },
    methods: {
        allchecked(e){
            console.log(e.target.checked)
            // 这里直接修改所有商品的选中
            this.$store.dispatch('editallgoods',e.target.checked)
        } ,
        gotopay(){
            if(this.totalmonry!=0)
            {
                this.$emit('gopay')
            }
        }
    },

}
</script>

<style scoped>
.catfooter{
    display: flex;
    height: 49px;
    background-color: pink;
    justify-content:space-evenly;
    line-height: 49px;
    text-align: center;
    align-items: center;
}
.allcheck{
    margin-left: 10px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
}
.price{
    flex:1;
    font-size: 20px;
    color: red;
}
.pay{
    
    background-color: deeppink;
    width: 40%;
    font-size: 16px;
    color: #fff;
}
.allcheck input{
  outline: none;
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  border: solid 0px #cccccc;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  cursor:pointer;
  -webkit-appearance: none;
  -webkit-user-select: none;
  vertical-align: top;
  background: url("~@/assets/img/cart/uncheck.png") no-repeat;
   background-size: 100% 100%;
   
}
.allcheck input:checked{
  background: url("~@/assets/img/cart/checked.png") no-repeat;
  background-size: 100% 100%;
}
</style>